<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>主页</title>
    <link href="css/css.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header>
        <div class="head_c">
            <!--头部-->
            <div class="top">
                <div class="top_left">欢迎来到“悠游行“旅游网站</div>
                <div class="top_right" style="display: flex;" id="login_signup_area">
                    <div class="top_right"><a href="login.html">登录</a><a href="zhuce.html">注册</a></div>
                </div>
                <div class="top_right" style="display: flex;" id="logout_area">
                    <a class="top_right" id="login_info" style="font-weight: bold;">用户：15159241643</a>
                    <div class="top_right logout_button" onclick="logout()">退出登录</div>
                </div>
            </div>
        </div>
    </header>

    <!--导航-->
    <nav>
        <ul>
            <li class="on"><a href="index.html">网站首页</a></li>
            <li><a href="jingdian.html">著名景点</a></li>
            <li><a href="luxian.html">推荐路线</a></li>
            <li><a href="jiudian.html">酒店入住</a></li>
            <li><a href="luntan.html">论坛热帖</a></li>
        </ul>
    </nav>

    <!--banner-->
    <div class="banner"></div>
    <div class="index_top">
        <!--推荐景点-->
        <div class="tuijian">
            <div class="tuijian_tit">推荐景点</div>
            <div class="tuijian_list">
                <ul id="spot_list">
                </ul>
            </div>
        </div>

        <div class="tj_luxian">
            <div class="tj_luxian_tit">推荐路线</div>
            <div class="tj_luxian_list">
                <ul id="tour_route_list">
                </ul>
            </div>
        </div>

    </div>

    <!--推荐酒店-->
    <div class="jiudian">
        <div class="jiudian_tit">推荐酒店</div>
        <div class="jiudian_list">
            <ul id="hotel_list">
            </ul>
        </div>
    </div>
    <div class="modal-wrapper hidden" id="float_area">
        <div class="modal">
            <h2 style="width:100%; text-align:center; line-height:40px;" id="text_float"></h2>
            <button style="margin: 25px auto 0px auto; justify-self: center;" id="text_float_close"
                onclick="float_area_close()">关闭</button>
        </div>
    </div>

    <footer>悠游行</footer>
</body>

</html>

<script src="./js/utils.js"></script>
<script>
    display_login_info();
    display_recomment_tour_route();
    display_recommend_spot();
    display_recomment_hotel();
    function select_spot(id) {
        setCookie("selected_spot_id", id);
        window.location.href = "jingdian-jieshao.html";
    }
    function select_hotel(id) {
        setCookie("selected_hotel_id", id);
        window.location.href = "jiudian-jieshao.html";
    }

    function display_recommend_spot() {
        //获取前6个景点进行展示
        api = baseUrl1 + "/spots/page?current=1";
        fetch(api, {
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(response => response.json())
            .then(data => {
                console.log(data);
                list = data["data"];
                table = document.querySelector("#spot_list");
                table.innerHTML = "";
                let i = 0;
                for (item of list) {
                    i++;
                    if (i > 6) break;
                    table.innerHTML += `
                        <li class="hover_color_change" onclick="select_spot(${item.id})">
                            <img src="${item.image}" alt="" style="width:241px; height:229px;"/>
                            <p>${item.title}</p>    
                        </li>
                    `
                }

            }).catch(error => {
                console.error(error);
                show_float_text("获取推荐景点数据异常");
            })
    }

    function display_recomment_hotel() {
        //显示5个酒店
        api = baseUrl2 + `/hotel/getPage?pageNum=1&pageSize=6`;
        fetch(api, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            }
        }).then(response => response.json()).then(data => {
            console.log(data);
            list = data["data"];
            table = document.querySelector("#hotel_list");
            table.innerHTML = "";
            for (item of list) {
                table.innerHTML += `
                <li class="hover_color_change" onclick="select_hotel(${item.id})">
                    <img src="${item.imagePath}" style="width:241px; height=229px;">
                    <p>${item.name}</p>
                </li>
                `
            }

        }).catch(error => {
            console.error(error);
        })
    }
    async function display_recomment_tour_route() {
        routers = [];
        //获取前4个路线进行展示
        api = baseUrl2 + "/route/selectPage?pageNum=1&pageSize=4";
        await fetch(api, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            },
        }).then(response => response.json())
            .then(data => {
                console.log(data);
                routers = data["data"];
                list = document.querySelector("#tour_route_list");
                list.innerHTML = "";
                for (item of routers) {
                    list.innerHTML += `
                    <li>
                        <a href="luxian.html"><span>${item.title ?? "空标题"}</span></a>
                        <p>${limited_string(item.content ?? "空内容", 75)}</p>
                    </li>
                    `
                }
            }).catch(error => {
                console.error(error);
                show_float_text("获取推荐路线异常");
            })

    }

</script>